<%--
  Created by IntelliJ IDEA.
  User: MondaDev01
  Date: 2017/7/7
  Time: 17:18
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE HTML>
<html lang="zh-CN">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>- 后台管理系统 -</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">   <%-- 在IE运行最新的渲染模式 --%>
    <meta name="viewport" content="width=device-width, initial-scale=1">   <%-- 初始化移动浏览显示 --%>
    <meta name="Author" content="Dreamer-1.">

    <!-- 引入各种CSS样式表 -->
    <link rel="stylesheet" href="/assets/css/bootstrap.css">
    <link rel="stylesheet" href="/assets/css/font-awesome.css">
    <link rel="stylesheet" href="/assets/css/index.css">	<!-- 修改自Bootstrap官方Demon，你可以按自己的喜好制定CSS样式 -->
    <link rel="stylesheet" href="/assets/css/font-change.css">	<!-- 将默认字体从宋体换成微软雅黑（个人比较喜欢微软雅黑，移动端和桌面端显示效果比较接近） -->

    <script type="text/javascript" src="/assets/js/jquery-1.12.3.min.js"></script>

    <script type="text/javascript" src="/assets/js/jquery.js"></script>
    <script type="text/javascript" src="/assets/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="/assets/js/user/user.js"></script>
    <script src="/assets/js/global.js"></script>


    <%--<script type="text/javascript" src="/assets/static/js/v1/third/plug/layer/layer.js"></script>--%>
    <script type="text/javascript" src="/assets/static/js/v1/third/plug/jBox/jquery.jBox.min.js"></script>
    <script type="text/javascript" src="/assets/static/js/v1/sys/jquery/jquery.validationEngine-zh_CN.js"></script>
    <script type="text/javascript" src="/assets/static/js/v1/sys/jquery/jquery.validationEngine.js"></script>
    <script type="text/javascript" src="/assets/static/js/v1/third/plug/jBox/jquery.jBox.js"></script>
    <script type="text/javascript" src="/assets/static/js/v1/third/plug/kindeditor-4.1.9/kindeditor.js"></script>
    <script type="text/javascript" src="/assets/static/js/v1/third/plug/kindeditor-4.1.9/lang/zh_CN.js"></script>

    <script type="text/javascript" src="/assets/jquery/showdate.js"></script>
    <script src="/assets/RSA/BigInt.js"></script>
    <script src="/assets/RSA/Barrett.js"></script>
    <script src="/assets/RSA/RSA.js"></script>

    <style>
        table tr th{align : center}
    </style>
</head>

<body>
<!-- 顶部菜单（来自bootstrap官方Demon）==================================== -->
<nav class="navbar navbar-inverse navbar-fixed-top">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" >
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="index.jsp">XXXX.com</a>
        </div>

        <div id="navbar" class="navbar-collapse collapse">
            <ul class="nav navbar-nav navbar-right">
                <li><a href="###" onclick="showAtRight('/user/userrole')"><i class="fa fa-users"></i> 用户列表</a></li>
                <li><a href="###" ><i class="fa fa-list-alt"></i> ${user.name}</a></li>
                <li><a href="/user/login/out" ><i class="fa fa-list"></i> 退出</a></li>
            </ul>

        </div>
    </div>
</nav>

<!-- 左侧菜单选项========================================= -->
<div class="container-fluid">
    <div class="row-fluie">
        <div class="col-sm-3 col-md-2 sidebar">
            <ul class="nav nav-sidebar">
                <!-- 一级菜单 -->
                <li class="active"><a href="#userMeun" class="nav-header menu-first collapsed" data-toggle="collapse">
                    <i class="fa fa-user"></i>&nbsp; 用户主页 <span class="sr-only">(current)</span></a>
                </li>
                <!-- 二级菜单 -->
                <!-- 注意一级菜单中<a>标签内的href="#……"里面的内容要与二级菜单中<ul>标签内的id="……"里面的内容一致 -->
                <ul id="userMeun" class="nav nav-list collapse menu-second">
                    <li><a href="###" onclick="showAtRight('/sys/user/user/info')"><i class="fa fa-users"></i> 用户信息</a></li>
                    <li><a href="###" onclick="showAtRight('/sys/user/user/info')"><i class="fa fa-users"></i> 考核列表</a></li>
                </ul>

                <li><a href="#productMeun" class="nav-header menu-first collapsed" data-toggle="collapse">
                    <i class="fa fa-globe"></i>&nbsp; 会议室厅 <span class="sr-only">(current)</span></a>
                </li>
                <ul id="productMeun" class="nav nav-list collapse menu-second">
                    <li><a href="###" onclick="showAtRight('/sys/room/list')"><i class="fa fa-list-alt"></i> 会议室</a></li>
                    <li><a href="###" onclick="showAtRight('/sys/boardroom/list')"><i class="fa fa-list-alt"></i> 会议室预约</a></li>
                </ul>

                <li><a href="#recordMeun" class="nav-header menu-first collapsed" data-toggle="collapse">
                    <i class="fa fa-file-text"></i>&nbsp; 权限管理 <span class="sr-only">(current)</span></a>
                </li>
                <ul id="recordMeun" class="nav nav-list collapse menu-second">
                    <li><a href="###" onclick="showAtRight('/sys/department/list')" ><i class="fa fa-list"></i> 部门管理</a></li>
                    <li><a href="###" onclick="showAtRight('/sys/positionType/list')" ><i class="fa fa-list"></i> 岗位管理</a></li>
                    <li><a href="###" onclick="showAtRight('/sys/user/list')" ><i class="fa fa-list"></i> 用户管理</a></li>
                    <li><a href="###" onclick="showAtRight('/sys/role/list')" ><i class="fa fa-list"></i> 角色管理</a></li>
                    <li><a href="###" onclick="showAtRight('/sys/operate/list')" ><i class="fa fa-list"></i> 操作管理</a></li>
                </ul>


                <li><a href="#assessment" class="nav-header menu-first collapsed" data-toggle="collapse">
                    <i class="fa fa-file-text"></i>&nbsp; 考核管理 <span class="sr-only">(current)</span></a>
                </li>
                <ul id="assessment" class="nav nav-list collapse menu-second">
                    <li><a href="###" onclick="showAtRight('/sys/assessmentTemplate/list')" ><i class="fa fa-list"></i> 创建模板</a></li>
                    <li><a href="###" onclick="showAtRight('/sys/assessment/list')" ><i class="fa fa-list"></i> 考核评审</a></li>
                </ul>

            </ul>

        </div>
    </div>
</div>

<!-- 右侧内容展示==================================================   -->
<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
    <h1 class="page-header"><i class="fa fa-cog fa-spin"></i>&nbsp;东莞图书<small>&nbsp;&nbsp;&nbsp;图书管理系统</small></h1>

    <!-- 载入左侧菜单指向的jsp（或html等）页面内容 -->
    <div id="htmlContainer">

        <h4>
            <strong>使用指南：</strong><br>
            <br><br>默认页面内容……
        </h4>

    </div>
</div>


<script type="text/javascript">

    /*
     * 对选中的标签激活active状态，对先前处于active状态但之后未被选中的标签取消active
     * （实现左侧菜单中的标签点击后变色的效果）
     */
    $(document).ready(function () {
        $('ul.nav > li').click(function (e) {
            //e.preventDefault();	加上这句则导航的<a>标签会失效
            $('ul.nav > li').removeClass('active');
            $(this).addClass('active');
        });
    });
    var showAtRight = function (url) {
        $.ajax({
            url:url,
            success:function (html) {
                $("#htmlContainer").html(html);
            }
        });
    };
</script>

</body>
</html>